<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片展示效果</title>
    <link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans|Oswald'><link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="slider">
  <div class="items-group">
    <!-- 四个跳转页面，可自行调整 -->
    <div class="item">
      <div class="block">
        <span class="circleLight"></span>
        <div class="text">
          <h2>Hello</h2>
          <p>Glad to see you~</p>
        </div>
      </div>
    </div>

    <div class="item">
      <div class="block">
        <span class="circleLight"></span>
        <div class="text">
          <h2>Hello</h2>
          <p>Glad to see you~</p>
        </div>
      </div>
    </div>

    <div class="item">
      <div class="block">
        <span class="circleLight"></span>
        <div class="text">
          <h2>Hello</h2>
          <p>Glad to see you~</p>
        </div>
      </div>
    </div>

    <div class="item">
      <div class="block">
        <span class="circleLight"></span>
        <div class="text">
          <h2>Hello</h2>
          <p>Glad to see you~</p>
        </div>
      </div>
    </div>
  </div>

  <!-- 菜单效果 -->
  <div class="navigations">
    <ul class="dots"></ul>
  </div>
</div>

<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script src="./script.js"></script>
</body>
</html>